<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>3D照片墙</title>
    <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <style>
      /* 正方向0-40度 */
      @keyframes rotateY1 {
        from {
          transform: rotateY(0deg);
        }
        to {
          transform: rotateY(40deg);
        }
      }

      /* 正方向40-80度 */
      @keyframes rotateY2 {
        from {
          transform: rotateY(40deg);
        }
        to {
          transform: rotateY(80deg);
        }
      }

      /* 正方向80-120度 */
      @keyframes rotateY3 {
        from {
          transform: rotateY(80deg);
        }
        to {
          transform: rotateY(120deg);
        }
      }

      /* 正方向120-160度 */
      @keyframes rotateY4 {
        from {
          transform: rotateY(120deg);
        }
        to {
          transform: rotateY(160deg);
        }
      }

      /* 正方向160-200度 */
      @keyframes rotateY5 {
        from {
          transform: rotateY(160deg);
        }
        to {
          transform: rotateY(200deg);
        }
      }

      /* 正方向200-240度 */
      @keyframes rotateY6 {
        from {
          transform: rotateY(200deg);
        }
        to {
          transform: rotateY(240deg);
        }
      }

      /* 正方向240-280度 */
      @keyframes rotateY7 {
        from {
          transform: rotateY(240deg);
        }
        to {
          transform: rotateY(280deg);
        }
      }

      /* 正方向280-320度 */
      @keyframes rotateY8 {
        from {
          transform: rotateY(280deg);
        }
        to {
          transform: rotateY(320deg);
        }
      }

      /* 正方向320-360度 */
      @keyframes rotateY9 {
        from {
          transform: rotateY(320deg);
        }
        to {
          transform: rotateY(360deg);
        }
      }

      /* 负方向0-40度 */
      @keyframes rotate-Y1 {
        from {
          transform: rotateY(0deg);
        }
        to {
          transform: rotateY(-40deg);
        }
      }

      /* 负方向40-80度 */
      @keyframes rotate-Y2 {
        from {
          transform: rotateY(-40deg);
        }
        to {
          transform: rotateY(-80deg);
        }
      }

      /* 负方向80-120度 */
      @keyframes rotate-Y3 {
        from {
          transform: rotateY(-80deg);
        }
        to {
          transform: rotateY(-120deg);
        }
      }

      /* 负方向120-160度 */
      @keyframes rotate-Y4 {
        from {
          transform: rotateY(-120deg);
        }
        to {
          transform: rotateY(-160deg);
        }
      }

      /* 负方向160-200度 */
      @keyframes rotate-Y5 {
        from {
          transform: rotateY(-160deg);
        }
        to {
          transform: rotateY(-200deg);
        }
      }

      /* 负方向200-240度 */
      @keyframes rotate-Y6 {
        from {
          transform: rotateY(-200deg);
        }
        to {
          transform: rotateY(-240deg);
        }
      }

      /* 负方向240-280度 */
      @keyframes rotate-Y7 {
        from {
          transform: rotateY(-240deg);
        }
        to {
          transform: rotateY(-280deg);
        }
      }

      /* 负方向280-320度 */
      @keyframes rotate-Y8 {
        from {
          transform: rotateY(-280deg);
        }
        to {
          transform: rotateY(-320deg);
        }
      }

      /* 负方向320-360度 */
      @keyframes rotate-Y9 {
        from {
          transform: rotateY(-320deg);
        }
        to {
          transform: rotateY(-360deg);
        }
      }

      body {
        background: #f9f9f9;
      }

      .my-container {
        width: 800px;
        height: 500px;
        margin: 20px auto;
        /*border: 1px solid red;*/
      }

      .photo-wrap {
        perspective: 800px;
        width: 800px;
      }

      .container {
        width: 800px;
        height: 500px;
        margin: 0 auto;
        position: relative;
        transform-style: preserve-3d;
      }

      .img {
        width: 200px;
        height: 118px;
        line-height: 118px;
        text-align: center;
        position: absolute;
        top: 160px;
        left: 300px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.9) inset;
        background: pink;
      }

      .img01 {
        transform: rotateY(0deg) translateZ(300px);
      }
      .img02 {
        transform: rotateY(40deg) translateZ(300px);
      }
      .img03 {
        transform: rotateY(80deg) translateZ(300px);
      }
      .img04 {
        transform: rotateY(120deg) translateZ(300px);
      }
      .img05 {
        transform: rotateY(160deg) translateZ(300px);
      }
      .img06 {
        transform: rotateY(200deg) translateZ(300px);
      }
      .img07 {
        transform: rotateY(240deg) translateZ(300px);
      }
      .img08 {
        transform: rotateY(280deg) translateZ(300px);
      }
      .img09 {
        transform: rotateY(320deg) translateZ(300px);
      }

      .prev {
        width: 30px;
        height: 70px;
        color: #6d8099;
        float: left;
        font-size: 22px;
        background: #ddd;
        line-height: 70px;
        text-align: center;
        position: relative;
        bottom: -175px;
        border-radius: 5px;
        z-index: 100;
      }
      .next {
        width: 30px;
        height: 70px;
        color: #6d8099;
        float: right;
        font-size: 22px;
        background: #ddd;
        line-height: 70px;
        text-align: center;
        position: relative;
        bottom: -175px;
        border-radius: 5px;
        z-index: 100;
      }
    </style>
  </head>

  <body class="body">
    <div class="my-container">
      <!-- <div class="prev"><</div> -->
      <div class="photo-wrap">
        <!-- 舞台 -->
        <div class="container">
          <!-- 容器 -->
          <div class="img img01">1</div>
          <div class="img img02">2</div>
          <div class="img img03">3</div>
          <div class="img img04">4</div>
          <div class="img img05">5</div>
          <div class="img img06">6</div>
          <div class="img img07">7</div>
          <div class="img img08">8</div>
          <div class="img img09">9</div>
        </div>
      </div>
      <!-- <div class="next">></div> -->
    </div>

    <script>
      function IsPC() {
        var userAgentInfo = navigator.userAgent;
        var Agents = [
          "Android",
          "iPhone",
          "SymbianOS",
          "Windows Phone",
          "iPad",
          "iPod",
        ];
        var flag = true;
        for (var v = 0; v < Agents.length; v++) {
          if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
          }
        }
        return flag;
      }

      var now = 1;
      var changeImg = function (flag) {
        var str = flag == "next" ? "-" : "";
        var className = "rotate" + str + "Y" + now;

        $(".container")
          .removeAttr("style")
          .css("animation", className + " 1s ease-in-out forwards");

        now = now + 1 > 9 ? 1 : now + 1;
      };

      var timer = setInterval(function () {
        changeImg("next");
      }, 3000);

      if (IsPC()) {
        //电脑访问
        $(".prev").click(function () {
          clearInterval(timer);
          changeImg("prev");
        });
        $(".next").click(function () {
          clearInterval(timer);
          changeImg("next");
        });
      } else {
        $(".prev").tap(function () {
          clearInterval(timer);
          changeImg("prev");
        });
        $(".next").tap(function () {
          clearInterval(timer);
          changeImg("next");
        });
      }
    </script>
  </body>
</html>
